<template>
    <div
        class="news-list-item bg-white flex-row"
        @click="goDetail(listItem.uids)"
    >
        <div class="date">
            <p>{{ $format(listItem.date, 'dd') }}</p>
            <p>{{ $format(listItem.date, 'yyyy.MM') }}</p>
        </div>
        <div class="content">
            <h2>【{{ listItem.TYPE_NAME }}】{{ listItem.title }}</h2>
            <p>{{ listItem.news }}</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ListItem',
        props: {
            listItem: {
                type: Object,
                default() {
                    return {}
                },
            },
        },
        data() {
            return {}
        },
        methods: {
            goDetail(id) {
                this.$router.push({ name: 'newsDetail', params: { id: id } })
            },
        },
        mounted() {},
    }
</script>

<style lang="scss">
    .news-list-item {
        padding: 30px 100px 30px 30px;
        border-bottom: 1px solid #eee;
        line-height: 24px;
        cursor: pointer;
        &:hover {
            background: #f0f1f2 !important;
        }
        .date {
            padding-right: 30px;
            p {
                font-weight: 400;
                text-align: center;
                &:first-child {
                    color: #6b6f8c;
                    font-size: 52px;
                    line-height: 50px;
                }
                &:last-child {
                    font-size: 14px;
                    color: #6b6f8c;
                }
            }
        }
        .content {
            h2 {
                font-weight: bold;
                color: #333333;
                font-size: 16px;
            }
            p {
                font-size: 14px;
                font-weight: 400;
                color: #666666;
                word-break: break-all;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                padding-left: 7px;
            }
        }
    }
</style>